<template>
	<div class="div1">
		<div class="div2">
			<img src="../../assets/img/头像.png" @click="login" />
			<h3>骑士</h3>
			<h4>关注233|粉丝:7878</h4>
		</div>
		<div style=" display: flex; width: 100%; background-color:#5f5f5f">
			<div style="margin-left: 10%;color: #ffa8b3;">
				<el-icon name="video-camera-solid" style="font-size: 40px;"></el-icon>
				<h4>购物车</h4>
			</div>
			<div style="margin-left: 10%;color: #feddbc;">
				<el-icon name="s-ticket" style="font-size: 40px;"></el-icon>
				<div>
					<router-link to="/mobile/orders">我的订单
					</router-link>
				</div>
			</div>
			<div style="margin-left: 10%;color: #78bdf2;">
				<el-icon name="s-management" style="font-size: 40px;"></el-icon>
				<h4>收藏</h4>
			</div>
			<div style="margin-left: 10%;color: #cab3f9;">
				<el-icon name="message-solid" style="font-size: 40px;"></el-icon>
				<h4>信息</h4>
			</div>
		</div>
		<MobileList proptitle="新书上市" :proplist='hotlist'></MobileList>
	</div>
</template>

<script>
	import MobileList from '@/components/mobile/home/MobileList.vue'
	export default {
		name: 'MobileAdmin',
		components: {
			MobileList
		},
		data() {
			return {
				hotlist: [],
				newlist: []
			}
		},
		methods: {
			login() {
				this.$router.push("/login")
			}
		},
		mounted() {
			this.$get("/api/public/findPageBook/1/20/0").then((resp) => {
				this.hotlist = resp.data.data.books
				console.log("newsList==========" + this.hotlist);
			})
		}
	}
</script>

<style scoped>
	.div2 {
		width: 100%;
		height: 180px;
		background-color: #343434;
	}

	.div2 img {
		width: 120px;
		height: 120px;
		border-radius: 50%;
		margin-left: 50px;
		margin-top: 30px;
	}

	.div2 h3 {
		margin-left: 180px;
		margin-top: -85px;
	}

	.div2 h4 {
		margin-left: 180px;
		margin-top: -1px;
	}
</style>